

<template>
  <div>
    <!-- 新闻标题头部 -->
    <mt-header class="header" fixed title="社区娱乐">
      <router-link to="/home/newlists" slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
    </mt-header>
    <!-- 导航栏 -->
    <div id="slider" class="mui-slider shequ">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            class="mui-control-item"
            href="#item1mobile"
            v-for="(item, index) in TypeTitles"
            :key="item.id"
            :class="{'mui-active':index == checkindex}"
            @click="toggle(index,item.apiUrl,item.id)"
          >{{item.name}}</a>
        </div>
      </div>
    </div>
    <!-- 对应导航内容 -->
    <div class="daoHangContentBoxBig" :v-model="scrollTop">
      <div class="daoHangContentBox" v-for="(item, index) in titleTypelist" :key="index">
        <div class="daoHangContent" v-if=" item.type == 'followCard' ">
          <div class="daoHangContent-header">
            <div class="header-left">
              <span>
                <img :src="item.data.content.data.author.icon">
              </span>
              <dl>
                <dt>{{item.data.content.data.author.name}}</dt>
                <dd>{{item.data.content.data.date | mathRomTime()}}</dd>
              </dl>
            </div>
            <div class="header-right">
              <span class="iconfont">&#xe6ad;</span>
            </div>
          </div>
          <div class="daoHangContent-text">
            <h2>{{item.data.content.data.title}}</h2>
            <p>
              {{item.data.content.data.description}}
              <span>#{{item.data.content.data.category}}#</span>
            </p>
          </div>
          <div class="daoHangContent-video">
            <video controls  :src="item.data.content.data.playUrl" :poster="item.data.content.data.cover.feed" preload='none'>
        
              
            </video>
            
          </div>
          <div class="daoHangContent-conut">
            <ul>
              <li>
                <!-- 点赞 -->
                <span class="iconfont">&#xe69c;</span>
                <a>{{item.data.content.data.consumption.collectionCount}}</a>
              </li>
              <li>
                <!-- 评论 -->
                <span class="iconfont">&#xe689;</span>
                <a>{{item.data.content.data.consumption.replyCount}}</a>
              </li>
              <li>
                <!-- 下载 -->
                <span class="iconfont">&#xe6cd;</span>
                <a>{{item.data.content.data.consumption.shareCount}}</a>
              </li>
            </ul>
            <span class="iconfont">&#xe71a;</span>
          </div>
        </div>
        <div class="daoHangContent" v-else>
          <div class="daoHangContent-header">
            <div class="header-left">
              <span>
                <img :src="item.data.author.icon" >
              </span>
              <dl>
                <dt>{{item.data.author.name}}</dt>
                <dd>{{item.data.releaseTime | mathRomTime()}}</dd>
              </dl>
            </div>
            <div class="header-right">
              <span class="iconfont">&#xe6ad;</span>
            </div>
          </div>
          <div class="daoHangContent-text">
            <h2>{{item.data.title}}</h2>
            <p>
              {{item.data.description}}
              <span>#{{item.data.category}}#</span>
            </p>
          </div>
          <div class="daoHangContent-video">
            <video controls :src="item.data.playUrl" :poster="item.data.cover.feed" preload='none'></video>
          </div>
          <div class="daoHangContent-conut">
            <ul>
              <li>
                <!-- 点赞 -->
                <span class="iconfont">&#xe69c;</span>
                <a>{{item.data.consumption.collectionCount}}</a>
              </li>
              <li>
                <!-- 评论 -->
                <span class="iconfont">&#xe689;</span>
                <a>{{item.data.consumption.replyCount}}</a>
              </li>
              <li>
                <!-- 下载 -->
                <span class="iconfont">&#xe6cd;</span>
                <a>{{item.data.consumption.shareCount}}</a>
              </li>
            </ul>
            <span class="iconfont">&#xe71a;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mui from "../../lib/mui/js/mui.min.js";
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      TypeTitles: [], //标题名
      checkindex: 0,
      titleApi: "/api/api/v5/index/tab/discovery", //初始化默认高亮请求地址
      titleTypelist: [], //初始化默认高亮请求分类内容
      getscrollTop: "",
     
    }
  },
  methods: {
    getTypeTitles: function() {
      //获取信息分类
      this.axios
        .get("https://api.apiopen.top/videoHomeTab")
        .then(result => {
          if (result.status === 200) {
            this.TypeTitles = result.data.result;
          }
        })
        .catch(function(error) {
          Toast({
            message: "网络延迟",
            position: "bottom",
            duration: 5000
          });
        });
    },
    toggle(index, thisApi, thisid) {
      //处理默认高亮及赋值当前高亮API
      this.checkindex = index;
      var strApi = "";
      // 处理api 前4个是直接在请求中处理获取  后面没有权限请求无法成功  可以再次请求后面获取
      if (index >= 4) {
        strApi = "https://api.apiopen.top/videoCategoryDetails?id=" + thisid;
      } else {
        //http://baobab.kaiyanapp.com/api/v5/index/tab/discovery api例子
        strApi = "/api" + thisApi.substr(27);
      }

      this.Titlescontent(strApi, this.checkindex);
    },
    Titlescontent: function(strApi, checkindex) {
      //请求当前高亮内容
      this.axios
        .get(strApi)
        .then(result => {
          if (result.status === 200) {
            if (checkindex >= 4) {
              this.titleTypelist = result.data.result;
            } else {
              this.titleTypelist = result.data.itemList;
            }
            // 初步处理获得的数据
            var firstDataList = this.titleTypelist;
            var dataList = [];
            firstDataList.forEach((element, index) => {
              if (
                element.type == "followCard" ||
                element.type == "videoSmallCard"
              ) {
                dataList.push(element);
              }
            });
            this.titleTypelist = dataList;
          }
        })
        .catch(function(error) {
          Toast({
            message: "网络延迟",
            position: "bottom",
            duration: 5000
          });
        });
    },
    setMuisLider: function() {
      function setmui() {
        mui(".mui-scroll-wrapper").scroll({
          //导航栏初始化  否则不滚动
          deceleration: 0.005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
      }
      setTimeout(setmui(), 1000);
    },
  },
  filters: {
    mathRomTime: function() {
      //随机时间
      var mathtime = Math.floor(Math.random() * 60);
      if (mathtime > 0) {
        mathtime = mathtime + "分钟前";
      } else {
        mathtime = "刚刚";
      }
      return mathtime;
    }
  },
  mounted() {
    this.setMuisLider();
  },
  created() {
    this.getTypeTitles();
    this.Titlescontent(this.titleApi, 0);
  },
  computed: {
    scrollTop: function() {
      window.onscroll = function() {
        this.getscrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
      };
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
